<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="flex items-center mb-5">
          <el-select
            filterable
            v-model="listQuery.pay_type"
            clearable
            @change="handleChangePayType"
            class=" w-52 mr-3"
            placeholder="请选择支付方式"
          >
            <el-option
              v-for="item in pay_type_list"
              :key="item.key"
              :label="item.name"
              :value="item.key"
            ></el-option>
          </el-select>
          <!-- <el-select
            filterable
            v-model="listQuery.pay_channel"
            clearable
            class=" w-52 mr-5"
            placeholder="请选择渠道"
          >
            <el-option
              v-for="item in channel_list"
              :key="item.channel_no"
              :label="item.name"
              :value="item.channel_no"
            ></el-option>
          </el-select> -->
          <el-select
            filterable
            v-model="listQuery.pay_status"
            clearable
            class="w-52 mr-5"
            placeholder="请选择支付状态"
          >
            <el-option
              v-for="item in pay_status_list"
              :key="item.key"
              :label="item.name"
              :value="item.key"
            ></el-option>
          </el-select>
          <div class="w-52 mr-5">
            <el-input
              v-model="listQuery.order_sn"
              placeholder="订单编号"
            ></el-input>
          </div>
          <div class="w-52 mr-5">
            <el-input
              v-model="listQuery.user_code"
              placeholder="用户编号"
            ></el-input>
          </div>
          <div class="w-52">
            <el-input
              v-model="listQuery.trade_no"
              placeholder="交易号"
            ></el-input>
          </div>
        </div>
        <div class="flex items-center mb-5">
          <el-date-picker
            class=""
            v-model="listQuery.add_time_start"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择创建时间开始"
          >
          </el-date-picker>
          <p>-</p>
          <el-date-picker
            class="mr-5"
            v-model="listQuery.add_time_end"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择创建时间结束"
          >
          </el-date-picker>
          <el-date-picker
            class=""
            v-model="listQuery.pay_time_start"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择支付时间开始"
          >
          </el-date-picker>
          <p>-</p>
          <el-date-picker
            class="mr-5"
            v-model="listQuery.pay_time_end"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择支付时间结束"
          >
          </el-date-picker>
          <div class="w-52 mr-5">
            <el-select
              filterable
              v-model="listQuery.receive_account_id"
              clearable
              class=" w-52 mr-5"
              placeholder="请选择收款账户"
            >
              <el-option
                v-for="item in receive_accounts_list"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <el-button type="primary" @click="searchForm" class="">
            搜索
          </el-button>
          <el-button type="primary" @click="resetList" class="">重置</el-button>
          <el-button type="primary" @click="handleGetExcel" class=""
            >导出</el-button
          >
        </div>
      </div>
      <div class="item">
        <el-table
          ref="dataList"
          :data="menuList"
          style="margin-bottom: 20px;"
          row-key="id"
          border
          v-loading="listLoading"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="id" label="序号"></el-table-column>
          <!-- <el-table-column prop="title" label="名称"></el-table-column> -->
          <el-table-column prop="user_id" label="用户ID"></el-table-column>
          <el-table-column prop="user_code" label="用户编号"></el-table-column>
          <el-table-column prop="nickname" label="用户昵称"></el-table-column>
          <el-table-column prop="order_sn" label="订单编号"></el-table-column>
          <el-table-column prop="money" label="充值金额"></el-table-column>
          <el-table-column prop="gold" label="金币数量"></el-table-column>
          <el-table-column prop="pay_status" label="状态"> </el-table-column>
          <el-table-column prop="pay_type" label="支付方式"></el-table-column>
          <el-table-column prop="pay_time" label="支付时间"></el-table-column>
          <el-table-column prop="trade_no" label="支付交易号"></el-table-column>
          <el-table-column prop="add_time" label="创建时间"></el-table-column>
          <el-table-column
            prop="merchant_name"
            label="收款账号"
          ></el-table-column>
        </el-table>
        <!-- 分页 -->
        <cus-pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.page_size"
          @pagination="getList"
        />
      </div>
    </el-card>
    <el-dialog
      v-dialogDrag
      :title="titleMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      @close="handleDialogClose"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="form"
        label-position="right"
        label-width="120px"
        style="width: 400px; margin: 0 auto;"
      >
        <el-form-item label="名字" prop="name">
          <el-input v-model="form.name" placeholder="请输入名字" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisible = false">
          取 消
        </el-button>
        <el-button type="primary" @click="submitForm()">
          确 认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  deleteData,
  listData,
  searchList,
  getExcel,
  getReceiveAccount
} from "@/api/order/recharge";

export default {
  data() {
    return {
      listLoading: false,
      total: 0,
      listQuery: {
        page: 1,
        page_size: 10,
        pay_type: undefined,
        pay_channel: undefined,
        pay_status: undefined,
        user_code: undefined,
        order_sn: undefined,
        trade_no: undefined,
        add_time_start: undefined,
        add_time_end: undefined,
        pay_time_start: undefined,
        pay_time_end: undefined,
        receive_account_id: undefined
      },
      selectList1: [
        { key: "1", lab: "上架" },
        { key: "2", lab: "下架" }
      ],
      selectList2: [
        { key: "1", lab: "上架" },
        { key: "2", lab: "下架" }
      ],
      selectList3: [
        { key: "1", lab: "上架" },
        { key: "2", lab: "下架" }
      ],
      menuList: [],
      searchList: [],
      pay_status_list: [],
      pay_type_list: [],
      receive_accounts_list: [],
      channel_list: [],
      dialogFormVisible: false,
      dialogStatus: "",
      titleMap: {
        update: "编辑",
        create: "增加"
      },
      form: {
        id: undefined
      },
      rules: {
        name: [{ required: true, message: "请输入名字", trigger: "blur" }]
      }
    };
  },
  created() {
    this.getList();
    this.searchMenuList();
    this.handleGetReceiveAccount();
  },
  methods: {
    handleGetReceiveAccount(type) {
      getReceiveAccount(type).then(res => {
        this.receive_accounts_list = res.data;
      });
    },
    handleChangePayType(value) {
      this.listQuery.receive_account_id = undefined;
      this.handleGetReceiveAccount(value);
    },

    getList() {
      this.listLoading = true;
      for (let key in this.listQuery) {
        this.listQuery[key] = !this.listQuery[key]
          ? undefined
          : this.listQuery[key];
      }
      listData(this.listQuery).then(response => {
        this.menuList = response.data.data;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    searchForm() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleGetExcel() {
      if (!this.listQuery.add_time_start || !this.listQuery.add_time_end) {
        this.$message.warning("请选择订单创建时间范围");
        return;
      }
      let data = {};
      for (let key in this.listQuery) {
        if (key !== "page" && key !== "page_size") {
          data[key] = !this.listQuery[key] ? undefined : this.listQuery[key];
        }
      }
      getExcel(data).then(response => {
        this.$message.success(response.data.msg);
      });
    },
    searchMenuList() {
      searchList().then(response => {
        this.searchList = response.data;
        this.pay_status_list = this.changeObg(
          response.data.pay_status_list,
          "支付状态"
        );
        this.pay_type_list = this.changeObg(
          response.data.pay_type_list,
          "支付方式"
        );
        this.channel_list = [...response.data.channel_list];
        // this.receive_accounts_list = response.data.receive_accounts.map(
        //   item => {
        //     let data = { id: item, name: item };
        //     return data;
        //   }
        // );
      });
    },
    resetList() {
      this.listQuery = {
        page: 1,
        page_size: 10,
        pay_type: undefined,
        pay_channel: undefined,
        pay_status: undefined,
        user_code: undefined,
        order_sn: undefined,
        trade_no: undefined,
        add_time_start: undefined,
        add_time_end: undefined,
        pay_time_start: undefined,
        pay_time_end: undefined,
        receive_account_id: undefined
      };
    },
    changeObg(data, name) {
      if (data === {}) {
        return;
      }
      let emptyArr = [];
      for (let key in data) {
        emptyArr = [...emptyArr, { key: key, name: data[key] }];
      }
      return emptyArr;
    },
    handleCreate(row) {
      this.resetForm();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
    },
    handleUpdate(row) {
      this.form = [];
      this.form.id = row.id;

      this.dialogStatus = "update";
      this.dialogFormVisible = true;

      this.form = Object.assign({}, this.form);
    },
    handleDelete(row) {
      let data = { ids: row.id };
      deleteData(data).then(response => {
        if (response.code === 200) {
          this.getList();
          this.$notify({
            type: "success",
            message: "操作成功",
            position: "bottom-right",
            showClose: false,
            duration: 3000
          });
        }
      });
    },
    allDel() {
      let delNum = [];
      this.$refs.dataList.selection.forEach(k => {
        delNum.push(k.id);
      });
      if (delNum.length === 0) {
        return;
      }
      let data = { ids: delNum.toString() };
      deleteData(data).then(response => {
        if (response.code === 200) {
          this.getList();
          this.$notify({
            type: "success",
            message: "操作成功",
            position: "bottom-right",
            showClose: false,
            duration: 3000
          });
        }
      });
    },
    submitForm() {
      this.$refs["dataForm"].validate(valid => {
        if (valid && this.dialogStatus === "create") {
          let formData = new FormData();
          for (let item in this.form) {
            this.form[item] === undefined
              ? ""
              : formData.append(item, this.form[item]);
          }
          saveData(formData).then(response => {
            if (response.code === 200) {
              this.getList();
              this.$notify({
                type: "success",
                message: "操作成功",
                position: "bottom-right",
                showClose: false,
                duration: 3000
              });
              this.dialogFormVisible = false;
            } else {
              this.$message({
                message: response.message,
                type: "error"
              });
            }
          });
        } else if (valid && this.dialogStatus === "update") {
          let formData = new FormData();
          for (let item in this.form) {
            this.form[item] === undefined
              ? ""
              : formData.append(item, this.form[item]);
          }
          updateData(formData).then(response => {
            if (response.code === 200) {
              this.getList();
              this.$notify({
                type: "success",
                message: "操作成功",
                position: "bottom-right",
                showClose: false,
                duration: 3000
              });
              this.dialogFormVisible = false;
            } else {
              this.$message({
                message: response.message,
                type: "error"
              });
            }
          });
        }
      });
    },
    resetForm() {
      this.form = {
        id: undefined
      };
    },
    // 监听dialog关闭时的处理事件
    handleDialogClose() {
      if (this.$refs["dataForm"]) {
        this.$refs["dataForm"].clearValidate(); // 清除整个表单的校验
      }
    }
  }
};
</script>
<style scoped>
[v-cloak] {
  display: none;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.demo-form-inline {
  float: right;
}

/deep/ .el-card__header {
  padding-bottom: 0;
}
</style>
